<template>
  <div>
    <section class="swipper">
      <a-carousel autoplay>
        <div class="swipper-options">
          <img src="../assets/swipper1.png" alt="" />
          <img src="../assets/swipper2.png" alt="" />
        </div>
        <div class="swipper-options">
          <img src="../assets/swipper3.png" alt="" />
          <img src="../assets/swipper4.png" alt="" />
        </div>
        <div class="swipper-options">
          <img src="../assets/swipper5.png" alt="" />
          <img src="../assets/swipper6.png" alt="" />
        </div>
      </a-carousel>
    </section>
    <section class="video">
      <div>
        <video src="../assets/v.f30.mp4" controls="controls"></video>
      </div>
      <div class="right-description">
        <p>匠心好茶</p>
        <p>用品质说话</p>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  //import引入的组件
  components: {},
  data() {
    return {};
  },
  //方法集合
  methods: {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang="less" scoped>
.swipper {
  height: 600px;

  .swipper-options {
    display: flex !important;
    img {
      width: 50%;
      height: 600px;
    }
  }
}
.video {
  height: 440px;
  background-image: url("../assets/bgp2.png");
  background-size: 100% 100%;
  display: flex;
  font-size: 36px;
  color: #a37c51;
  div:nth-of-type(1) {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  video {
    height: 440px;
    height: 400px;
  }

  .right-description {
    width: 50%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    P {
      width: 100%;
      text-align: center;
    }
  }
}
</style>
